<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>简易备忘录</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
    }

    .container {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
    }

    .middle-box {
      display: flex;
      /* 分配剩余所有空间 */
      flex: 1;
    }

    .middle-box .finish-list,
    .middle-box .finish-list-second {
      /* background-color: green; */
      width: 17vw;
    }

    .middle-box .unfinish-list {
      /* background-color: skyblue; */
      flex: 1;
      text-align: center;
      margin: 0 10px;
    }

    .middle-box .finish-list .finish-list-item,
    .middle-box .unfinish-list .unfinish-list-item {
      position: relative;
      padding: 5px 10px;
      height: 30px;
      border-radius: 5px;
      font-size: 16px;
      background-color: grey;
      display: flex;
      margin-bottom: 10px;
      align-items: center;
      /* 垂直居中 */
      justify-content: space-between;
      /* 水平分配空间，使按钮靠右 */
      overflow: hidden;
      /* 隐藏溢出内容 */
      white-space: nowrap;
      /* 不换行 */
    }

    .middle-box .finish-list .finish-list-item span,
    .middle-box .unfinish-list .unfinish-list-item span {
      display: inline-block;
      max-width: calc(100% - 30px);
      /* 减去按钮宽度，保证文字区域不会挤压按钮 */
      overflow: hidden;
      /* 隐藏溢出内容 */
      text-overflow: ellipsis;
      /* 文本过长时用...代替 */
      white-space: nowrap;
      /* 不换行 */
    }

    .middle-box .finish-list .finish-list-item>button,
    .middle-box .unfinish-list .unfinish-list-item>button {
      position: relative;
      top: auto;
      right: 0;
      padding: 0 10px;
      /* 添加内边距使按钮更明显 */
    }

    /* 单独设置 .middle-box .unfinish-list .unfinish-list-item 覆盖前面的样式 */
    .middle-box .unfinish-list .unfinish-list-item {
      padding-left: 30px;
      background-color: skyblue;
    }

    /* 输入框样式 */
    .add-box .input-box {
      padding: 8px 12px;
      margin-right: 10px;
      margin-bottom: 20px;
      border: 1px solid #ccc;
      border-radius: 4px;
      outline: none;
      font-size: 16px;
      width: 300px;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    /* 添加按钮样式 */
    .add-box button {
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      background-color: #4CAF50;
      color: white;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .add-box button:hover {
      background-color: #45a049;
    }

    /* 测试按钮样式 */
    .test-btn {
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      background-color: #FF9800;
      color: white;
      cursor: pointer;
      transition: background-color 0.3s;
      margin-left: 10px;
    }

    .test-btn:hover {
      background-color: #f57c00;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="title-box">
      <h2 style="text-align: center" id="title">简易备忘录</h2>
    </div>
    <div class="add-box" style="text-align: center">
      <input class="input-box" type="text" placeholder="请输入备忘录内容" />
      <button class="add-btn">添加</button>
      <button class="test-btn">test</button>
    </div>
    <div class="middle-box">
      <div class="finish-list">
        <!-- <div data-createTime="1234567890">已完成</div> -->
      </div>
      <div class="unfinish-list">
        <!-- <div data-createTime="1234567890"><span>未完成</span><button>已完成</button></div> -->
      </div>
      <div class="finish-list-second">
        <!-- 这个div是用来充数的，为了让中间的div占满剩余空间，方便中间的盒子居中 -->
      </div>
    </div>
  </div>
  <script>
    const addBtn = document.querySelector(".add-box .add-btn");
    const inputBox = document.querySelector(".add-box .input-box");
    const finishList = document.querySelector(".middle-box .finish-list");
    const unfinishList = document.querySelector(".middle-box .unfinish-list");
    const testBtn = document.querySelector(".test-btn");
    const title = document.querySelector("#title");

    const date = new Date();

    title.innerHTML = `简易备忘录${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;

    let arr = [1, 2, 3, 4, 5];
    console.log("arr", arr);

    testBtn.addEventListener("click", function () {
      console.log(Date.now());
      arr.unshift(11);
      console.log("arr", arr);
      console.log("date", date.getYear());
    });

    /* 
    simpleMemo的数据结构
    {
      finishList: [
        {
          finishTime: Date.now(), // 完成时间
          createTime: Date.now(), // 创建时间
          content: "吃饭" // 备忘录内容
        }
      ],
      unfinishList: [
        {
          createTime: Date.now(), // 创建时间
          content: "睡觉" // 备忘录内容
        }
      ]
    }
  */

    // 向unfinishList中添加备忘录，返回 修改后的simpleMemo
    function addUnfinishList(content, simpleMemo) {
      if (!simpleMemo) return; // 如果simpleMemo不存在，则返回空对象
      const thisSimpleMemo = simpleMemo;
      thisSimpleMemo.unfinishList.unshift({
        createTime: Date.now(),
        content: content,
      });

      return thisSimpleMemo;
    }

    // 将unfinishList中的数据删除，返回 [ 删除的元素, 修改后的simpleMemo ]
    function deleteUnfinishList(createtime, simpleMemo) {
      if (!simpleMemo) return; // 如果simpleMemo不存在，则返回空对象
      const thisSimpleMemo = simpleMemo;
      let obj = null;
      const index = thisSimpleMemo.unfinishList.findIndex(
        (item) => item.createTime == createtime
      );

      if (index !== -1) {
        obj = thisSimpleMemo.unfinishList[index]; // 保存要删除的元素
        thisSimpleMemo.unfinishList.splice(index, 1);
      }

      return [obj, thisSimpleMemo];
    }

    // 向finishList中添加备忘录，返回 修改后的simpleMemo
    function addFinishList(unfinishObj, simpleMemo) {
      if (!simpleMemo) return; // 如果simpleMemo不存在，则返回空对象
      const thisSimpleMemo = simpleMemo;
      thisSimpleMemo.finishList.unshift({
        // 向头部添加元素
        finishTime: Date.now(),
        createTime: unfinishObj.createTime,
        content: unfinishObj.content,
      });

      return thisSimpleMemo;
    }

    // 将finishList中的数据删除，返回 [ 删除的元素, 修改后的simpleMemo ]
    function deleteFinishList(createTime, simpleMemo) {
      if (!simpleMemo) return; // 如果simpleMemo不存在，则返回空对象
      const thisSimpleMemo = simpleMemo;
      let obj = null;
      const index = thisSimpleMemo.finishList.findIndex(
        (item) => item.createTime == createTime
      );
      if (index !== -1) {
        obj = thisSimpleMemo.finishList[index]; // 保存要删除的元素
        thisSimpleMemo.finishList.splice(index, 1);
      }

      return [obj, thisSimpleMemo];
    }

    // 渲染页面
    function render(simpleMemo) {
      finishList.innerHTML = simpleMemo.finishList
        .map((item) => `<div class="finish-list-item" data-createTime="${item.createTime}"><span>${item.content}</span><button>删除</button></div>`)
        .join("");
      unfinishList.innerHTML = simpleMemo.unfinishList
        .map(
          (item) =>
            `<div class="unfinish-list-item" data-createTime="${item.createTime}"><span>${item.content}</span><button>已完成</button></div>`
        )
        .join("");
    }

    // 获取备忘录数据
    function getSimpleMemo() {
      let simpleMemo = localStorage.getItem("simpleMemoImportant");

      if (simpleMemo) {
        return JSON.parse(simpleMemo);
      } else {
        return {
          finishList: [],
          unfinishList: [],
        }
      }
    }

    // 存储备忘录数据
    function setSimpleMemo(simpleMemo) {
      if (!simpleMemo) {
        simpleMemo = {
          finishList: [],
          unfinishList: [],
        }
      }

      localStorage.setItem("simpleMemoImportant", JSON.stringify(simpleMemo));
    }

    addBtn.addEventListener("click", function () {
      // 1. 获取本地数据
      // 2. 新增finishList列表
      // 3. 渲染到页面
      // 4. 存储到本地
      const content = inputBox.value;
      if (content === "") {
        return;
      }
      // 1. 获取本地数据
      const simpleMemo = getSimpleMemo();

      // 2. 新增unfinishList列表
      const resSimpleMemo = addUnfinishList(content, simpleMemo);

      // 3. 渲染到页面
      render(resSimpleMemo);

      // 4. 存储到本地
      setSimpleMemo(resSimpleMemo);
      // 清空输入框
      inputBox.value = "";
    });

    // 监听键盘事件
    inputBox.addEventListener("keyup", function (event) {
      if (event.key === "Enter") {
        // 直接调用addBtn的click事件
        addBtn.click();
      }
    });

    unfinishList.addEventListener("click", function (event) {
      if (event.target.tagName.toLowerCase() === "button") {
        // 1. 获取本地数据
        const simpleMemo = getSimpleMemo();

        // 2. 删除unfinishList列表
        const [unfinishObj, resSimpleMemo] = deleteUnfinishList(
          event.target.parentElement.dataset.createtime,
          simpleMemo
        );

        // 3. 新增finishList列表
        const resSimpleMemo2 = addFinishList(unfinishObj, resSimpleMemo);

        // 4. 渲染到页面
        render(resSimpleMemo2);

        // 5. 存储到本地
        setSimpleMemo(resSimpleMemo2);
      }

    });

    finishList.addEventListener("click", function (event) {
      if (event.target.tagName.toLowerCase() === "button") {
        // 1. 获取本地数据
        const simpleMemo = getSimpleMemo();

        // 2. 删除finishList列表
        const [finishObj, resSimpleMemo] = deleteFinishList(
          event.target.parentElement.dataset.createtime,
          simpleMemo
        );

        // 3. 存储到本地
        setSimpleMemo(resSimpleMemo);

        // 4. 渲染到页面
        render(resSimpleMemo);
      }
    })

      // 即可执行一次渲染
      ; (function () {
        const simpleMemo = getSimpleMemo();
        render(simpleMemo);
      })()
  </script>
</body>

</html>